<template>
  <Drawer :show="show" mode="right" drawerBg="rgba(0,0,0,.8)" @change="drawerChange">
    <div class="drawer_content">
      <!-- <div class="title">计划</div> -->
      <view class="form_content">
        <!-- 任务 -->
        <textarea :value="formData.value" class="form_text" name="input" @input="textChange" />
        <!-- 时间 -->
        <picker :value="formData.date" class="form_date" mode="date" @change="dateChange">
          <div class="form_date_content">
            <Icon class="form_date_icon" type="app-naozhong" />
            <div class="form_date_text">
              <text v-if="!formData.date" >设置时间</text>
              <template v-else>
                <text>{{ dateFormatStr }}</text>
                <div class="line"></div>
                <Icon class="close" type="app-jiahao" size="12" @click.native.stop="closeFn" />
              </template>
            </div>
          </div>
        </picker>
      </view>
      <view class="form_btn">
        <button plain :disabled="!formData.value" class="form_btn_ok" form-type="submit">
          完成
        </button>
      </view>
    </div>
  </Drawer>
</template>
<script>
import { getRandomFn } from '@/common/utils/util.js';
import { mapGetters } from 'vuex';
import Drawer from '@/components/Drawer/index.vue';
import Icon from '@/components/Icon/index.vue';
import dayjs from 'dayjs';
export default {
  name: 'AddTaskForm',
  components: {
    Icon,
    Drawer
  },
  model: {
    prop: 'show',
    event: 'change'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {}
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    dateFormatStr () {
      console.log(dayjs().isSame(dayjs(this.formData.date), 'day'))
      if (dayjs().isSame(dayjs(this.formData.date), 'day')) {
        return '今天'
      }
      return dayjs(this.formData.date).format('YYYY年MM月DD日')
    }
  },
  mounted () {
  },
  methods: {
    drawerChange (type) {
      this.$emit('change', type);
    },
    // 内容change
    textChange ({ detail }) {
      this.$set(this.formData, 'value', detail.value);
    },
    // 时间change
    dateChange ({ detail }) {
      this.$set(this.formData, 'date', detail.value);
    },
    closeFn () {
      this.$set(this.formData, 'date', '');
    },
    formSubmit (e) {
      console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
      var formdata = e.detail.value
      uni.showModal({
        content: '表单数据内容：' + JSON.stringify(formdata),
        showCancel: false
      });
    },
    formReset (e) {
      console.log('清空数据')
    }
  },
  watch: {
    show (val) {
    }
  }
}
</script>
<style lang="less" scoped>
.drawer_content {
  padding: calc(38rpx + var(--status-bar-height)) 24rpx 38rpx;
  background-blend-mode: Difference;
  color: #fff;
  .title {
    padding-left: 46rpx;
    color: #fff;
    font-style: italic;
    font-weight: bold;
    font-size: 42rpx;
    text-decoration: underline;
  }
  .form_content {
    margin: 80rpx 0;
    .form_text {
      width: 100%;
      padding: 20rpx 10rpx 10rpx 20rpx;
      background-color: rgba(255, 255, 255, 0.1);
      // border: 1px solid #999;
      border-radius: 12rpx;
      transition: all 0.3s;
      box-sizing: border-box;
      &:hover {
        background-color: rgba(255, 255, 255, 0.2);
      }
    }
    .form_date {
      display: inline-block;
      .form_date_content {
        margin-top: 80rpx;
        height: 60rpx;
        border-radius: 30rpx;
        background-color: #d6d6d6;
        padding: 0 24rpx;
        color: rgba(0, 0, 0, 1);
        display: flex;
        align-items: center;
        .form_date_icon {
          margin-top: 4rpx;
          
        }
        .form_date_text {
          margin-left: 10rpx;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          .line {
            width: 1px;
            height: 20rpx;
            margin: 0 10rpx;
            background: #999;
          }
          .close {
            transform: rotate(45deg);
            color: #999;
          }
        }
      }
    }
  }
  .form_btn {
    .form_btn_ok {
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: orange;
      border: none;
      margin-right: 0;
      transition: all 0.3s;
      &[disabled] {
        color: rgba(221, 221, 221, 0.3);
        background-color: transparent;
      }
    }
  }
}
</style>